<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课程管理系统</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        /* 保留原有的样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            width: 100px;
            height: 100%;
            float: left;
            background-color: #fff;
            padding: 20px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        nav a {
            display: block;
            margin: 10px 0;
            text-decoration: none;
            color: #4CAF50;
            padding: 10px;
            border-radius: 5px;
            transition: background 0.3s;
        }
        nav a:hover {
            background-color: #e7f7e7;
        }
        .search-container {
            margin-left: 200px;
            margin-top: 20px;
            margin-bottom: 20px;
            position: relative;
        }

        .search-container label {
            display: inline-block;
            margin-right: 10px;
        }

        .search-container input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: calc(100% - 400px);
            margin-right: 0;
        }

        .search-container button {
            position: absolute;
            right: 200px;
            top: 0;
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .search-container button:hover {
            background-color: #45a049;
        }

        .courses-list {
            border-collapse: collapse;
            width: calc(100% - 220px);
            margin-left: 200px;
            margin-right: 150px;
            background-color: white;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        .courses-list th, .courses-list td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .courses-list th {
            background-color: #4CAF50;
            color: white;
        }
        .courses-list tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .courses-list tr:hover {
            background-color: #f1f1f1;
        }

        /* 按钮样式 */
        .table-button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin: 0 5px; /* 按钮之间的间距 */
        }

        .table-button.update {
            background-color: #4CAF50; /* 更新按钮颜色 */
            color: white;
            transition: background 0.3s;
        }

        .table-button.update:hover {
            background-color: #45a049; /* 更新按钮悬停效果 */
        }

        .table-button.delete {
            background-color: #f44336; /* 删除按钮颜色 */
            color: white;
            transition: background 0.3s;
        }

        .table-button.delete:hover {
            background-color: #d32f2f; /* 删除按钮悬停效果 */
        }


        /* 新增分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-left: 220px;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .pagination button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .pagination span {
            margin: 0 10px;
            line-height: 30px;
        }

        /* 遮罩层样式 */
        .modal-overlay {
            display: none; /* 默认隐藏 */
            position: fixed; /* 使用固定定位 */
            left: 0;
            top: 0;
            width: 100%; /* 占满全宽 */
            height: 100%; /* 占满全高 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
            z-index: 999; /* 遮罩层在最上层 */
        }

        /* 模态框样式 */
        #updateModal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 使用固定定位 */
            left: 50%; /* 左侧位置 */
            top: 50%; /* 顶部位置 */
            transform: translate(-50%, -50%); /* 平移50%宽度和50%高度，确保居中 */
            background-color: #fff; /* 背景颜色为白色 */
            border-radius: 8px; /* 圆角边框 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影 */
            padding: 20px; /* 内边距 */
            width: 400px; /* 某个固定宽度 */
            z-index: 1000; /* 确保模态框高于遮罩层 */
        }

        /* 模态框内部内容样式 */
        #updateModal .modal-content {
            font-family: Arial, sans-serif; /* 字体 */
        }

        /* 模态框按钮样式 */
        #updateModal button {
            margin-top: 10px; /* 上方间距 */
            padding: 10px 15px; /* 内边距 */
            border: none; /* 去除边框 */
            border-radius: 5px; /* 圆角边框 */
            cursor: pointer; /* 鼠标为指针 */
            transition: background 0.3s; /* 背景效果过渡 */
        }

        #updateModal button#confirmUpdate {
            background-color: #4CAF50; /* 确认按钮绿色背景 */
            color: white; /* 字体颜色白色 */
        }

        #updateModal button#confirmUpdate:hover {
            background-color: #45a049; /* 鼠标悬停时变浅 */
        }

        #updateModal button:nth-child(2) {
            background-color: #f44336; /* 取消按钮红色背景 */
            color: white; /* 字体颜色白色 */
        }

        /* 调整取消按钮的左边距 */
        #updateModal button:nth-child(2) {
            margin-left: 20px; /* 使取消按钮和更新按钮之间的距离更远 */
        }

        #updateModal button:nth-child(2):hover {
            background-color: #e53935; /* 鼠标悬停时变浅 */
        }

        /* 输入框样式 */
        #updateModal input[type="text"],
        #updateModal select {
            width: 100%; /* 输入框和选择框宽度100% */
            padding: 10px; /* 内边距 */
            margin-top: 5px; /* 上方间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 圆角边框 */
            box-sizing: border-box; /* 包含内边距和边框在内 */
        }
    </style>
</head>
<body>

<header>
    <h1>课程管理系统222</h1>
</header>

<nav>
    <a href="${pageContext.request.contextPath}/teacherlist.jsp">教师管理</a>
    <a href="${pageContext.request.contextPath}/course.jsp">课程管理</a>
    <a href="#">系统设置</a>
</nav>

<div class="search-container">
    <label for="search">搜索课程:</label>
    <input type="text" id="search" placeholder="输入课程名称">
    <button onclick="searchCourse()">搜索</button>
</div>

<table class="courses-list" id="coursesTable">
    <thead>
    <tr>
        <th>课程ID</th>
        <th>课程名称</th>
        <th>授课教师</th>
        <th>学分</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据将在此加载 -->
    </tbody>
</table>

<div class="pagination">
    <button id="prevPage" onclick="changePage(-1)">上一页</button>
    <span id="pageInfo">第 <span id="currentPage">1</span> 页，共 <span id="totalPages">1</span> 页</span>
    <button id="nextPage" onclick="changePage(1)">下一页</button>
</div>

<div class="modal-overlay" id="modalOverlay"></div>
<div id="updateModal">
    <div class="modal-content">
        <h3>更新课程信息</h3>
        <label>课程ID:</label>
        <input type="text" id="courseID" readonly>
        <label>课程名称:</label>
        <input type="text" id="courseName">
        <label>授课教师:</label>
        <input type="text" id="instructor">
        <label>学分:</label>
        <input type="text" id="credits">
        <button id="confirmUpdate">确认更新</button>
        <button onclick="closeModal()">取消</button>
    </div>
</div>

</body>
<script>
    let currentPage = 1;
    let totalPages = 1;
    const pageSize = 5; // 每页显示的记录数
    var currentCourseList;

    $(document).ready(function () {
        loadCourses(currentPage);
    });

    // 加载课程数据
    function loadCourses(page) {
        $.ajax({
            url: 'http://localhost:8080/course/', // 替换为实际的API端点
            method: 'GET',
            data: {
                pageNumber: page,
                pageSize: pageSize,
                search: $('#search').val()
            },
            success: function (response) {
                const courses = response.dataList;
                totalPages = response.totalPages;
                updateTable(courses);
                updatePagination();
            },
            error: function (xhr, status, error) {
                console.error("加载课程数据失败:", error);
            }
        });
    }

    // 更新课程表格
    function updateTable(courses) {
        const tbody = $('#coursesTable tbody');
        currentCourseList = courses;
        tbody.empty();
        courses.forEach(function (course) {
            tbody.append(`
                <tr>
                    <td>` + course.courseID + `</td>
                    <td>` + course.courseName + `</td>
                    <td>` + course.instructor + `</td>
                    <td>` + course.credits + `</td>
                    <td>
                        <button class="table-button update" onclick="updateCourse(` + course.courseID + `)">
                            更新
                        </button>
                        <button class="table-button delete" onclick="deleteCourse(` + course.courseID + `)">
                            删除
                        </button>
                    </td>
                </tr>
            `);
        });
    }

    function updatePagination() {
        $('#currentPage').text(currentPage);
        $('#totalPages').text(totalPages);
        $('#prevPage').prop('disabled', currentPage === 1);
        $('#nextPage').prop('disabled', currentPage === totalPages);
    }

    function changePage(delta) {
        currentPage += delta;
        loadCourses(currentPage);
    }

    function searchCourse() {
        currentPage = 1; // 重置到第一页
        loadCourses(currentPage);
    }

    function updateCourse(courseID) {
        let course = currentCourseList.find(c => c.courseID === courseID);

        // 填充模态框
        $('#courseID').val(course.courseID);
        $('#courseName').val(course.courseName);
        $('#instructor').val(course.instructor);
        $('#credits').val(course.credits);

        $('#updateModal').fadeIn();
    }

    $('#confirmUpdate').click(function () {
        const updatedCourse = {
            courseID: $('#courseID').val(),
            courseName: $('#courseName').val(),
            instructor: $('#instructor').val(),
            credits: $('#credits').val()
        };

        // 更新课程请求
        $.ajax({
            url: 'http://localhost:8080/course/updateCourseById', // 替换为实际的API端点
            method: 'POST',
            data: updatedCourse,
            success: function (response) {
                loadCourses(currentPage); // 刷新课程列表
                $('#updateModal').hide(); // 关闭模态框
            },
            error: function (xhr, status, error) {
                console.error("更新失败:", error);
            }
        });
    });

    function closeModal() {
        $('#updateModal').hide();
    }

    function deleteCourse(courseID) {
        if (confirm("确定要删除该课程吗？")) {
            $.ajax({
                url: 'http://localhost:8080/course/deleteCourseById', // 替换为实际的API端点
                method: 'DELETE',
                data: {
                    courseID: courseID
                },
                success: function (response) {
                    loadCourses(currentPage); // 刷新课程列表
                },
                error: function (xhr, status, error) {
                    console.error("删除失败:", error);
                }
            });
        }
    }
</script>
</html>
